(function () {
  document.addEventListener('DOMContentLoaded', () => {
    // 获取html元素
    const html = document.querySelector('html');
    // 根据屏幕宽度动态计算fontSize
    let fontSize = window.innerWidth / 10;
    // 当fontSize大于50时，设置最大值为50
    fontSize = fontSize > 50 ? 50 : fontSize;
    // 设置html的fontSize属性，使rem生效，1rem = fontSize + 'px'
    html.style.fontSize = fontSize + 'px';
  });

  /*防抖方法*/
  function debounce(fn, event, delay) {
    var delay = delay || 300;
    var timer = null;
    return function (e) {
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
        fn();
      }, delay);
    };
  }

  // 1. 图片的按需加载
  var lazyLoadClass = '.lazyload-img';
  // var imgArr = Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass));
  const imgArr = Array.from(document.querySelectorAll(lazyLoadClass));

  lazyLoadImgs();

  // var timer = null;
  // window.addEventListener(
  //   'scroll',
  //   function () {
  //     clearTimeout(timer);
  //     timer = setTimeout(function () {
  //       lazyLoadImgs();
  //     }, 100);
  //   },
  //   false
  // );
  window.addEventListener('scroll', debounce(lazyLoadImgs), false);

  function lazyLoadImgs() {
    for (var i = 0; i < imgArr.length; i++) {
      if (isInVisibleArea(imgArr[i])) {
        imgArr[i].src = imgArr[i].getAttribute('data-src');
        imgArr.splice(i, 1);
        i--;
      }
    }
  }

  // 是否在页面可视区内
  function isInVisibleArea(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.bottom > 0 &&
      rect.top < window.innerHeight &&
      rect.right > 0 &&
      rect.left < window.innerWidth
    );
  }
})();
